window.addEventListener('load', function () {
    // 点击赛事中心和荣耀榜，滑动下面内容模块和上面红线
    var sm_see = document.querySelectorAll('.JSlide-wp .sm');
    var slideBdOne = document.querySelector('.JSlide-bd-ctent .JSlide-bd-index');
    console.log(slideBdOne);
    var gloryListBox = document.querySelector('.gloryList-slidebox-c2');
    var slideLine = document.querySelector('.JSlide-wp .slide-line');
    sm_see[0].addEventListener('mouseover', function () {
        slideBdOne.style.display = 'block';
        gloryListBox.style.display = 'none';
        slideLine.style.left = 11 + 'px';
        sm_see[1].style.color = '';
        this.style.color = '#f24854';
    });
    sm_see[1].addEventListener('mouseover', function () {
        slideBdOne.style.display = 'none';
        gloryListBox.style.display = 'block';
        slideLine.style.left = 112 + 'px';
        sm_see[0].style.color = '';
        this.style.color = '#f24854';
    });

    // 2 点击下拉列表，显示下拉内容
    var dropOn = document.querySelectorAll('.gloryList-slidebox-c2 .drop-on');
    var dropContent = document.querySelectorAll('.gloryList-slidebox-c2 .drop-on-content');
    var flag = 1;
    // 第一个是特殊的，单独点击出现和消失
    dropOn[0].addEventListener('click', function () {
        if (flag == 1) {
            dropContent[0].style.display = 'block';
            flag = 0;
        } else {
            dropContent[0].style.display = 'none';
            flag = 1;
        }
    });


    for (var i = 1; i < dropContent.length; i++) {
        dropOn[i].setAttribute('index', i);
        dropOn[i].addEventListener('click', function () {
            for (var i = 1; i < dropContent.length; i++) {
                dropContent[i].style.display = 'none';
            }
            var index = this.getAttribute('index');
            if (flag) {
                dropContent[index].style.display = 'block';
                flag = 0;
            } else {
                dropContent[index].style.display = 'none';
                flag = 1;
            }
        });
    }


    // 3 点击小圆点轮播玩家角色模块
    var cirSpot = document.querySelectorAll('.double-spot-zwj .cir-spot');
    var roleWrap = document.querySelector('.rolePlayer-wrap');
    cirSpot[0].addEventListener('click', function () {
        roleWrap.style.left = 0 + 'px';
        cirSpot[1].classList.remove('now-zwj');
        this.classList.add('now-zwj');
    });
    cirSpot[1].addEventListener('click', function () {
        roleWrap.style.left = -900 + 'px';
        cirSpot[0].classList.remove('now-zwj');
        this.classList.add('now-zwj');
    });


    var hoverTar = document.querySelector('.hoverTar-b-r');
    var imgBox = document.querySelectorAll('.pics-text-ls .imgBox');
    var picLis = document.querySelectorAll('.pics-text-ls li');
    for (var i = 0; i < imgBox.length; i++) {
        picLis[i].setAttribute('index-i', i);
        picLis[i].addEventListener('mouseover', function () {
            var index = this.getAttribute('index-i');
            imgBox[index].style.transition = '.5s';
            imgBox[index].style.transform = 'scale(1.05)';
        });
        picLis[i].addEventListener('mouseleave', function () {
            var index = this.getAttribute('index-i');
            imgBox[index].style.transition = '.5s';
            imgBox[index].style.transform = 'scale(1)';
        });
    }
})